<script setup>
    import { RouterLink ,RouterView ,useRouter} from 'vue-router';
    import login from '../components/login.vue'
    import load from '../components/load.vue'
    import Header from '../components/header.vue'
    import Main from '../components/main.vue'
    import Footer from '../components/footer.vue'
    import {ref , reactive} from 'vue'
    import { useUserStore  } from '../stores/user'
    import getUser  from "../api/getuser.js"
    let userInform = useUserStore();
    const loading = ref(true) ; 
    userInform.getJwtToken() ;
    userInform.clearStyle()
    const use = useRouter();

    setTimeout(() => {
        loading.value = false ;
    }, 1000);
    try{

        if(userInform.userId === ""){
        getUser({
        }).then(function (response) {
        if(response.status === 200 && response.data.userId!== undefined)
        {
            loading.value = false ;
            userInform.userId = response.data.userId ;
            if( response.data.userId !== undefined )
            localStorage.setItem("userId", response.data.userId)
            userInform.username = response.data.userName ;
            userInform.image = response.data.imageId;
            userInform.article =  response.data.articleId ;
        }        
        else {
            localStorage.removeItem("jwttoken");
            localStorage.removeItem("userId");
        }
        console.log(userInform)
       
        })
        }
    }
    catch(error)
    {
        loading.value = false ;
        console.error(error);
    }
    
    

    
</script>

<template >
<div v-if="loading"><load/></div>    
<div v-else>
    <el-container>
    <el-header style="width: 100%;">
        <Header></Header>
    </el-header>
    <el-main style="margin-top: 3rem;"><Main></Main></el-main>
    <el-footer><Footer></Footer></el-footer>
    </el-container>
</div>
</template>

<style>
body{
    margin: 0;
    padding: 0;
    background-color: white !important;
}
</style>    